<template>
	<gui-page :customHeader="true">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<!-- 搜索框 -->
				<view class="header-search gui-bg-white gui-dark-bg-level-3 gui-border-box">
					<gui-search @clear="search" placeholder="搜索课程" @confirm="search"></gui-search>
				</view>
				<cc-title-nav title="历史记录" fsize="fz14" ctitle="清空记录"></cc-title-nav>
				<view class="gui-flex gui-row gui-wrap mt10">
					<gui-tags v-for="(tag,index) in  tags"
					:key="index"
										:text="tag" 
										:customClass="['gui-transparent-bg', 'gui-color-gray']" 
										:lineHeight="2.2" 
										:size="26"
										@tapme="handleSearch(tag)"
										borderColor="#eee"></gui-tags>
				</view>
				<cc-title-nav title="热门搜索" fsize="fz14" ctitle=""></cc-title-nav>
				<view class="gui-flex gui-row gui-wrap mt10">
					<gui-tags v-for="(tag,index) in  tags"
					:key="index"
										:text="tag" 
										:customClass="['gui-transparent-bg', 'gui-color-gray']" 
										:lineHeight="2.2" 
										:size="26"
										@tapme="handleSearch(tag)"
										borderColor="#eee"></gui-tags>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
export default {
	data() { 
		return {
			tags:["AI创造合集","商业插画入门","哈哈","家庭AI","绘画"]
		}
	},
	methods: {
		handleSearch(e){
			uni.navigateTo({
				url: `/pages/search/detail?keyword=${e}`,
			});
		}
	}
}
</script>
<style scoped lang="scss">

</style>
